<template>
    <div id="chaxun">
        </br>
        <span>搜索</span><input v-model='search' class="search" placeholder="请输入关键字/日期/类别">
        <div id="search">
            <ul v-for="item in searchData ">
                <li>
                    <div class="odiv">
                        <img v-bind:src="item.imagesrc">
                        <a @click="yidong">{{item.title}}</a>
                        ({{item.time}})
                    </div>
                </li>
            </ul>
        </div>
        </br></br></br>

    </div>
</template>

<script>
export default {
    name: 'search',
    data () {
        return {
            search: '',
            xinwens: [{
                title: '苹果卖39888元天价 比iPhone还贵',
                time: '2016-12-29',
                imagesrc: "../../assets/new1.jpg",
                fenlei:"生活"
            },{
                title: '今天是毛泽东123年诞辰纪念日 6位亲人牺牲',
                time: '2016-12-29',
                imagesrc: "../../assets/new2.jpg",
                fenlei:"健康"
            },{
                title: '故宫为什么不开放冷宫？带你了解真相',
                time:'2016-12-30',
                imagesrc: "../../assets/new3.jpg"
            },{
                title: '李克强：依靠改革开放创新增强西部内生动力',
                time: '2016-12-30',
                imagesrc: "../../assets/new4.jpg",
                fenlei:"国内"
            },{
                title: '追过杨幂？王思聪：很欣赏她但只是网友',
                time:'2016-12-30',
                imagesrc: "../../assets/new5.jpg",
                fenlei:"娱乐"
            }, {
                title: '中央释放的这些改革信号 将影响你的买房决定',
                time:'2016-12-30',
                imagesrc: "../../assets/new6.jpg",
                fenlei:"国内"
            },{
                title: '詹皇31分欧文准绝杀 库里打铁圣诞战骑士险胜',
                time:'2016-12-30',
                imagesrc:"../../assets/new7.jpg",
                fenlei:"体育"
            },{
                title: '李健平安夜空降视频互动 世巡圆满收官',
                time:'2016-12-30',
                imagesrc:"../../assets/new8.jpg",
                fenlei:"娱乐"
            },{
                title: '神话将登《一周的偶像》 6人完整体亮相',
                time:'2016-12-30',
                imagesrc:"../../assets/new9.jpg",
                fenlei:"娱乐"
            }
            ]
        }
    },
    computed: {
        searchData: function() {
            var search = this.search;
            if (search) {
                return this.xinwens.filter(function(xinwen) {
                    return Object.keys(xinwen).some(function(key) {
                        return String(xinwen[key]).toLowerCase().indexOf(search) > -1
                    })
                })
            }
            return this.xinwens;
        }
    },
    methods : {
        yidong(){ }
    }
}
</script>

<style>
#chaxun{
    width:100%;
}

#chaxun span{
    width:10%;
    height:10px;
    background-color:#26A2FF;
    color:white;
    text-align:center;
    padding:13px;
    padding-left:10px;
    padding-right:10px;
}

.search{
    width:80%;
    height:39px;
    border: 1px solid #26A2FF;
    font-size:15px;
    background:url(../../assets/search.png) no-repeat;
    background-size:30px 30px;
    background-position:right;
}

.odiv img{
    height:auto;
    width:35%;
}

.odiv{
	width:93%;
    text-align:left;
	box-shadow:inset 0px 0px 0px 1px #000;
	padding:15px;
	border-radius:10px;
	font-size:16px;

}

#search{
    margin-top:15px;
}

#search ul{
    margin:3px;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
}

.odiv a{
    position:absolute;
    float:left;
    color:black;
}
</style>